<style>
div .thumb{
	height:60px;
	width:190px;
	background:#F7F7F7;
	margin-bottom: 3px;
	margin-right:5px;
	padding:10px;
	color:#000000;
	cursor:pointer;
	cursor:hand;
}
div .active{
	background:#7F7F7F;
	color:#FFFFFF;
}
div .thumb_image{
	display:inline;
	width:60px;
	float: left;
	margin-right: 10px;
}
div .thumb_title{	
	float:left;
	width:120px;	
}
</style>
<script type="text/javascript">
	$(document).ready(function(){
		$("#vdo_player > iframe").width('418');
		$("#vdo_player > iframe").height('330');
		$(".thumb").live('click',function(){
			$(this).closest('#vdo_playlist').find(".active").attr('class','thumb');
			$(this).attr('class','thumb active');
			var id = $(this).find('.vid').val();
			$.post('vdos/load_content',{
				'id':id,
				'type':'player'
			},function(data){
				$("#vdo_player").html(data);
				$("#vdo_player > iframe").width('418');
				$("#vdo_player > iframe").height('330');
			})
			$.post('vdos/load_content',{
				'id':id,
				'type':'content'
			},function(data){
				$("#vdo_detail").html(data);
			})
			$.post('vdos/load_content',{
				'id':id,
				'type':'comment'
			},function(data){
				$("#comment").html(data);
			})
		})
	})
</script>
<div class="galleries" style="height:550px">
	<div class="header-bar">
		<h1>วีดีทัศน์</h1>
	</div>
	<div id="vdo_frame" style="border: 1px solid #CCCCCC;height: 330px;width:100%;">
		<div id="vdo_player" style="display: inline;height: 350px;width:70%;" align="center">
			<?=$thumb_vdo->vdo_script;?>
		</div>
		<div id="vdo_playlist" style="float: right;">			
			<?php 
			$i=0;
			foreach($thumb_vdo as $item):
			$i++; 
			?>
			<div id="thumb" class="thumb <? if($i==1)echo 'active';?>">
				<div class="thumb_image">
				<?php echo thumb($item->cover_pic,60,60,0)?>
				</div>
				<div class="thumb_title">			
				<?=substr($item->title,0,100)."...";?>
				<!--
				<a href="vdos/index/<?=$item->id;?>"><?=substr($item->title,0,100)."...";?></a>
				-->
				<input type="hidden" name="vid" class="vid" value="<?=$item->id;?>">
				</div>
			</div>
			<? endforeach;?>			
		</div>
		<div class="clear"></div>
	</div>
	<div class="clear"></div>
	<div style="float:right;">
		<a href="vdos/categories">
			<img src="themes/tpso1/images/bt_all_vdo.png" border="0">
		</a>
	</div>
	<div class="clear"></div>
	<div class="clear"></div>
	<div id="vdo_detail">
		<h3><?=$thumb_vdo->title;?></h3><br>
		<?=$thumb_vdo->description;?>
	</div>
<div id="comment">	
</div>